<template>
  <main>
    <h2>父组件监听子组件生命周期</h2>
    <p>1、利用@hook，好像只能监听子组件的mounted钩子（vue3是叫@vue）</p>
    <p>2、利用自定义事件</p>
    <child-comp
      @vue:mounted="childCompMounted"
      ref="childCompRef"
      @getLifeCycle="childLiftCycle"
    ></child-comp>
  </main>
</template>
<script setup>
import ChildComp from "./coms/ChildComp.vue";
import { onMounted, ref } from "vue";

function childCompMounted() {
  console.log("childCompMounted");
}
const childCompRef = ref(null);
const childLiftCycle = (lifecycle) => {
  console.log("childLiftCycle", lifecycle);
};
onMounted(() => {
  childCompRef.value.fn();
  console.log("childCompRef", childCompRef);
});
</script>
<style lang="scss" scoped></style>
